<template>
  <div class="column_list_select" v-if="columns_">
    <el-checkbox v-model="selectAll" class="select_all" style="width:80%" label="select All"></el-checkbox>
    <el-checkbox-group v-model="columnsChecked_" class="column_list_select_group" @change="checkedChange">
      <el-checkbox style="width:100%"  v-for="item in columns_" :label="item.name"  :key="key":disabled="item.isDisabled" >{{item.title}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<style rel="stylesheet/scss" type="text/css" lang="scss" scoped>
  @import "../../assets/css/variable";
  .column_list_select{
    position: absolute;
    right: 12px;
    top: 26px;
    background-color: rgba(255, 255, 255, 0.88);
    z-index: 100;
    box-shadow: -2px 1px 30px 0px rgba(0, 0, 0, 0.3);
    padding: 12px 0;
    border-radius: 4px;
    width: 200px;
    text-align: left;
    .column_list_select_group{
      max-height: 450px;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0 12px;
    }
    .select_all{
      border-bottom: 2px $activeColor solid;
      margin: 0 0 8px 15px;
      padding: 0 12px 8px 12px;
    }
    .el-checkbox:first-child{
      margin-left: 15px;
    }
    &:before{
      content: "";
      position: absolute;
      right: 8px;
      top:-16px;
      border: 10px transparent solid;
      border-bottom-color: #fff ;

    }
  }
</style>
<script>
    export default{
        name:"FilterColumn",
        created:function () {
          this.columns_ = this.columns? JSON.parse(JSON.stringify(this.columns)):null;
          this.columnsChecked_ = this.columnsChecked? JSON.parse(JSON.stringify(this.columnsChecked)):[];
        },
        data:function(){
          return {
            columns_:null, //所有要筛选的列数组对象[{name:'',title:"",isDisabled:Boolean},....]
            columnsChecked_:null, //选中的列name['head_img' ....]
            selectAll:false, //选中所有
          }
        },
        methods: {
          /*
          * 选中改变事件 value为选中列的name的[];
          * */
          checkedChange:function (value) {
            this.$emit("checked-change",value);
          },
          /*
          *初始化选中所有的状态
          * */
          initCheckAll:function () {
            this.selectAll = this.columns_.length === this.columnsChecked_.length
          }
        },
        computed:{

        },
        watch:{
          'columnsChecked_':function () {
            this.initCheckAll();
          },
          'selectAll':function (value) {
            if(value&&this.columns_.length !== this.columnsChecked_.length){
              this.columnsChecked_ = this.columns_.map(function (item) {
                return item.name;
              });
            }
            if(!value&&this.columns_.length == this.columnsChecked_.length){
              this.columnsChecked_ = this.columns_.filter(function (item) {
                return item.isDisabled;
              }).map(function(item2){
                return item2.name;
              });;
            }
          }

        },
        props: {
          columns: {
            type:Array,
          },
          columnsChecked:{
            type:Array
          }
        }
    }
</script>
